<template>
  <view class="container">
    <view class="city" @click="ctrCityList">
      <text>{{ city_name }}</text>
      <image :src="showCityList ? '/static/images/expand.png' : '/static/images/collapse.png'"></image>
    </view>
    <view class="city-list" v-if="showCityList">
      <view class="name" @click="changeCity(item.city_id, item.name)" v-for="(item, key) in city_list" :key="key">{{ item.name }}</view>
    </view>

    <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="500" v-if="banner_list.length > 0">
      <swiper-item v-for="(item, index) in banner_list" :key="index">
        <image :src="item" mode="aspectFill" class="slide-image"></image>
      </swiper-item>
    </swiper>
    <view class="icon-box">
      <view class="box">
        <image src="/static/images/icon1.png"></image>
        <text>专业陪诊</text>
      </view>
      <view class="box">
        <image src="/static/images/icon2.png"></image>
        <text>高效就医</text>
      </view>
      <view class="box">
        <image src="/static/images/icon3.png"></image>
        <text>精准就医</text>
      </view>
      <view class="box">
        <image src="/static/images/icon4.png"></image>
        <text>高端之选</text>
      </view>
    </view>
    <view class="three-box">
      <image class="one" @click="go(config[0].type, config[0].type == 1 ? config[0].service_id : config[0].article_id)" :src="config[0].img"></image>
      <view class="right">
        <image class="two" @click="go(config[1].type, config[1].type == 1 ? config[1].service_id : config[1].article_id)" :src="config[1].img"></image>
        <view class="contact-box">
          <button class="contact-btn" plain open-type="contact" hover-class="none">
            <image class="three" :src="config[2].img"></image>
          </button>
        </view>
      </view>
    </view>

    <view class="six-box">
      <image class="six-img" @click="go(config[3].type, config[3].type == 1 ? config[3].service_id : config[3].article_id)" :src="config[3].img"></image>
      <image class="six-img" @click="go(config[4].type, config[4].type == 1 ? config[4].service_id : config[4].article_id)" :src="config[4].img"></image>
      <image class="six-img" @click="go(config[5].type, config[5].type == 1 ? config[5].service_id : config[5].article_id)" :src="config[5].img"></image>
      <image class="six-img" @click="go(config[6].type, config[6].type == 1 ? config[6].service_id : config[6].article_id)" :src="config[6].img"></image>
      <image class="six-img" @click="go(config[7].type, config[7].type == 1 ? config[7].service_id : config[7].article_id)" :src="config[7].img"></image>
      <image class="six-img" @click="goOrderList()" :src="config[8].img"></image>
    </view>

    <view class="hospital-box">
      <navigator hover-class="none" :url="'/pages/hospital/hospital?id=' + item.id" class="hospital" v-for="(item, index) in hospital_list" :key="index">
        <image class="img" :src="item.img"></image>
        <view class="info">
          <view class="name">{{ item.name }}</view>
          <view class="tag-box">
            <view class="tag" v-for="(val, key) in item.tags" :key="key">{{ val }}</view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCityList: false,
      city_id: 0,
      city_name: '',
      banner_list: [],
      city_list: [],
      config: [],
      hospital_list: []
    };
  },

  onLoad: function () {
    this.getIndexData();
  },

  onPullDownRefresh() {
    this.getIndexData();
  },

  methods: {
    ctrCityList: function () {
      this.showCityList = !this.showCityList
    },

    getIndexData: function () {
      var city_id = uni.getStorageSync('city_id') ? uni.getStorageSync('city_id') : 0;

      this.$http.post('/index/Api/index', {city_id}).then(res => {
        var {banner, city_list, config, hospital_list} = res.data.data,
          city_id = uni.getStorageSync('city_id'),
          city_name = uni.getStorageSync('city_name');

        if ((!city_id || !city_name) && city_list.length > 0) {
          uni.setStorageSync('city_id', city_list[0].city_id);
          uni.setStorageSync('city_name', city_list[0].name)
          city_name = city_list[0].name;
        }

        this.city_name = city_name

        this.banner_list = banner;
        this.city_list = city_list;
        this.config = config;
        this.hospital_list = hospital_list;
        this.showCityList = false;

        uni.stopPullDownRefresh();
      })
    },

    changeCity: function (city_id, city_name) {
      uni.setStorageSync('city_id', city_id);
      uni.setStorageSync('city_name', city_name);
      this.getIndexData();
    },

    go: function (type, id) {
      if (type == 1) {
        // 服务
        uni.navigateTo({
          url: '/pages/service/service?id=' + id
        })
      } else {
        // 文章
        uni.navigateTo({
          url: '/pages/article/article?id=' + id
        })
      }
    },

    goOrderList: function () {
      uni.switchTab({
        url: '/pages/order_list/order_list'
      })
    },
  },

}
</script>

<style lang="scss">
.container {
  background: #fff;
  padding: 20rpx;

  .city {
    display: flex;
    align-items: center;
    margin-left: 20rpx;

    image {
      margin-left: 10rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }

  .city-list {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    top: 69rpx;
    left: 20rpx;
    z-index: 100;
    padding: 20rpx;
    border-radius: 10rpx;


    .name {
      font-size: 28rpx;
      margin-bottom: 20rpx;
      color: #fff;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .swiper {
    height: 290rpx; /* 设置轮播图高度 */
    border-radius: 20rpx; /* 设置圆角 */
    overflow: hidden; /* 确保子元素超出部分被隐藏 */
    margin-top: 14rpx;

    .slide-image {
      width: 100%;
      height: 100%;
    }
  }

  .icon-box {
    display: flex;
    justify-content: space-between;
    margin-top: 14rpx;

    .box {
      display: flex;

      image {
        width: 30rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      text {
        font-size: 24rpx;
        color: $main-blank;
      }
    }
  }

  .three-box {
    display: flex;
    height: 330rpx;
    justify-content: space-between;
    margin-top: 14rpx;

    .one {
      width: 48%;
      height: 100%;
      border-radius: 20rpx;
      flex-shrink: 0; // 防止被挤压
      object-fit: cover;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      width: 48%;

      .two {
        width: 100%;
        height: 150rpx;
        border-radius: 20rpx;
        object-fit: cover;
      }

      .contact-box {
        height: 150rpx;
        position: relative;

        .contact-btn {
          padding: 0;
          margin: 0;
          border: none;
          height: 100%;
          border-radius: 20rpx;

          .three {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .six-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 14rpx;

    .six-img {
      width: 48%;
      height: 130rpx;
      flex-shrink: 0;
      margin-bottom: 20rpx;
      object-fit: cover;
    }
  }

  .hospital-box {
    background: #fff;

    .hospital {
      background: #F2F6F7;
      border-radius: 20rpx;
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .img {
        width: 30%;
        height: 140rpx;
        flex-shrink: 0; // 防止被挤压
        margin-right: 20rpx;
        object-fit: cover;
      }

      .info {
        flex: 1;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .tag-box {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20rpx;

          .tag {
            font-size: 22rpx;
            color: $main-blank;
            padding: 2rpx 12rpx;
            border: 2rpx solid #EAB999;
            border-radius: 20rpx;
            margin-right: 20rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }
}
</style>

